<template>
	<view>


		<view v-if="show" class="cu-list menu-avatar card-menu margin-top-xl margin-bottom-xl padding-bottom-xl shadow-lg radius">
			<view class="cu-form-group">
				<view class="text-gray title">场景值</view>
				<input type="number" placeholder="请输入文件名称" v-model="form.action_info.scene.scene_id" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title text-grey">二维码类型</view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						<view class="cu-tag round bg-olive ">
							{{picker[index]}}
						</view>
					</view>
				</picker>
			</view>
			<view class="mt-5 flex align-center px-3">
				<view style="flex:3;">
					<button class='cu-btn  round bg-gradual-blue padding  text-center shadow-blur py-4 font-lg block' @click="confirm">提交</button>
				</view>
				<view class="ml-1" style="flex:2;">
					<button class='cu-btn  round bg-orange padding  text-center shadow-blur py-4 font-lg block' @click="hideModel">取消</button>
				</view>
			</view>
		</view>
		<view class="flex flex-direction bg-white mx-2 margin-top-xl margin-bottom-xl shadow-lg">
			<view class="p-2 text-center" v-if="list.length===0">暂无二维码</view>
			<view class="flex " v-else v-for="(item,index) in list" :key="index">
				<view class="flex mb-1  py-1 mx-1 flex-direction align-start" style="width: 60%;">
					<view class="text-cut" style="width: 100%;">
						ticket：{{item.ticket}}
					</view>
					<view class="">
						expire_seconds：{{item.expire_seconds}}
					</view>
					<view class="">
						url：{{item.url}}
					</view>
					<view class="cu-tag bg-orange my-1">
						类型：{{item.action_name}}
					</view>
					<image  style="width: 200rpx;height: 200rpx;" :src="item.ticket | formatUrl" mode=""></image>
				</view>
				<view class="flex align-center">
					<view @click="del(item)" class="flex cu-tag round bg-orange">
						删除
					</view>
					<!-- #ifndef H5 -->
					<view @click="download(item)" class="flex cu-tag round bg-olive">
						下载
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<a class="table-btn" :href="item.ticket | formatUrl" target='_blank'>下载入口</a>
					<!-- #endif -->
				</view>
			</view>

		</view>
		<view class="padding-xl">
			<button class="mt-2 block bg-green  lg  cu-btn round" @click="openModel">新增公众号二维码</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				index: 0,
				show: false,
				form: {
					expire_seconds: 2592000,
					action_name: 'QR_LIMIT_SCENE',
					action_info: {
						scene: {
							"scene_id": 0
						}
					}
				},
				picker: ['零时二维码', '永久二维码'],
				pickerEnum: [{
					key: 'QR_SCENE',
					value: '零时二维码'
				}, {
					key: 'QR_LIMIT_SCENE',
					value: '永久二维码'
				}]
			}
		},
		filters: {
			formatUrl(value) {
				return 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + value
			}

		},
		onLoad() {
			this.getList()
		},
		methods: {
			hideModel(){
				this.show=false
				this.form={
					expire_seconds: 2592000,
					action_name: 'QR_LIMIT_SCENE',
					action_info: {
						scene: {
							"scene_id": 0
						}
					}
				}
			},
			download(item) {
				let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${item.ticket}`
				uni.downloadFile({
					url: url, //仅为示例，并非真实的资源
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: function(res) {
									var savedFilePath = res.savedFilePath;
								}
							});
						}
					}
				});
			},
			del(item) {
				uni.showModal({
					title: '高危操作',
					content: '是否要删除该二维码',
					showCancel: true,
					success: res => {
						if (res.confirm) {
							uniCloud.callFunction({
								name: 'wxAction',
								data: {
									action: 'qrcode',
									params: {
										id: item._id
									},
									options: 'del'
								},
								success: (res) => {
									if(res.data.code===400){
										return uni.showToast({
											title: res.data.data,
											icon: 'none'
										});
									}
									if (res.success) {
										uni.showToast({
											title: '删除成功',
											icon: 'none'
										});
										this.getList()
									}
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			openModel() {
				this.show = true
			},
			PickerChange(e) {
				this.index = parseInt(e.detail.value)
				this.form.action_name = this.pickerEnum[this.index].key
			},
			getList() {
				// 获取微信二维码数据列表
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'qrcode',
						params: {},
						options: 'getlist'
					},
					success: (res) => {
						this.list = res.result.data.length !== 0 ? res.result.data : []
					},
					fail: () => {

					},
					complete: () => {

					}

				})
			},
			confirm() {
				// 组织数据
				let data = this.form
				data.action_info.scene.scene_id = parseInt(data.action_info.scene.scene_id)
				// 发送获取ticket请求
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'qrcode',
						params: data,
						options: 'getticket'
					},
					success: (res) => {
						this.hideModel()
						this.getList()
					},
					fail: () => {

					},
					complete: () => {

					}

				})
				// 保存ticket 到后台服务
				// 返回请求结果
				// 获取ticket列表
				// 
			},
		}
	}
</script>

<style>

</style>
